<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/mui.picker.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<link rel="stylesheet" type="text/css" href="css/orderDetail.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title"></h1>
		</header>
		<div class="top-font" onclick="payInfo()">
			等待您支付房费
			<img style="width: 8px;height: 15px;transform: rotate(-180deg);margin-left: 15px;"
				src="./images/whiteArrow.svg" alt="">
		</div>
		<div class="time-font">
			<span>重新预定可能会涨价或没房哦</span>
			<span>29：37</span>
		</div>
		<div class="write-change-info">
			<div onclick="mustRead()" class="flex-spacebetween" style="font-size: 11px;">
				<div style="display: flex;">
					<span style="font-weight: 700;">入住必读</span>
					<span style="margin-left: 5px;">请您携带所入住人的身份证或有效证件</span>
				</div>
				<div style="transform: rotate(-90deg);margin-left: 15px;">
					<img src="./images/arrow.png" style="width: 14px;height: 14px">
				</div>
			</div>
			<div onclick="cancelRule()" class="flex-spacebetween" style="font-size: 11px;">
				<div style="display: flex; ">
					<span style="font-weight: 700;">取消规则</span>
					<span style="margin-left: 5px;white-space: normal;">您的订单一经确认，不可变更或取消；</span>
				</div>
				<div style="transform: rotate(-90deg);margin-left: 15px;">
					<img src="./images/arrow.png" style="width: 14px;height: 14px">
				</div>
			</div>
		</div>
		<div class="write-change-info">
			<div onclick="mustRead()" class="flex-spacebetween" style="font-size: 11px;">
				<div style="display: flex;">
					<span style="font-weight: 700;font-size: 15px;">需在线支付</span>
					<span style="margin-left: 5px;color: #FD6257;">￥190</span>
				</div>
				<div onclick="payDetail()" style="display: flex;">
					<div style="color: #05C484;">费用明细</div>
					<div style="transform: rotate(-90deg);margin-left: 15px;">
						<img src="./images/arrow.png" style="width: 14px;height: 14px">
					</div>
				</div>
			</div>
		</div>

		<div class="write-change-info">
			<div class="content-title">
				您的订单权益
			</div>
			<div class="flex-spacebetween" style="margin-top: 10px;">
				<div style="width: 100px;font-size: 12px;">里程入账</div>
				<div style="font-size: 12px;">
					<div>预计获得<span style="color:#05C484;">190</span>里程，离店后3天内到账</div>
					<div style="color:#7F7F7F;">里程可抵现，兑换红包、商城产品等；到账后可至【我的】-【里程】查看明细</div>
				</div>
			</div>
		</div>

		<div class="write-change-info">
			<div style="display: flex;justify-content: space-between">
				<img src="./images/cbd.jpg" style="width: 40px;height: 40px;border-radius: 6px;" alt="">
				<div style="margin-left: 6px;">
					<div class="flex-spacebetween">
						<div style="font-size: 15px;font-weight: 700;">漫选CC酒店(西安港务大道地铁站店)</div>
						<div style="transform: rotate(-90deg);margin-left: 15px;">
							<img src="./images/arrow.png" style="width: 14px;height: 14px">
						</div>
					</div>
					<div class="flex-spacebetween" style="font-size: 10px;">
						<div id="hotelAddress">国展中心/浐灞国际港务区丨国际港务区港务大道99号陆港金融小镇瑞斯丽悦庭2-1000号</div>
						<div onclick="copyAddress()" style="color: #05C484;width: 50px;">复制</div>
					</div>
				</div>
			</div>
			<div class="icon-area">
				<div onclick="connectHotel()" style="display: flex;">
					<img style="width: 16px;height: 16px;" src="./images/phone.png" alt="">
					联系酒店
				</div>
				<div onclick="car()" style="display: flex;">
					<img style="width: 16px;height: 16px;" src="./images/car.png" alt="">去打车
				</div>
				<div onclick="map()" style="display: flex;">
					<img style="width: 16px;height: 16px;" src="./images/map.png" alt="">地图
				</div>
			</div>
		</div>

		<div class="write-change-info">
			<div class="content-title">
				您的行程安排
			</div>
			<div style="display: flex;align-items: center;margin: 10px 0;">
				<div class="flex-direction-colum">
					<div style="font-weight: 700;font-size: 12px;">1月06日 今天</div>
					<div style="font-size: 10px;">14:00 后入住</div>
				</div>
				<div class="date-middle-area">
					<div class="black-line"></div>
					<div class="total-days">
						共100晚
					</div>
				</div>
				<div class="flex-direction-colum">
					<div style="font-weight: 700;font-size: 12px;">1月07日 明天</div>
					<div style="font-size: 10px;">12:00 后离店</div>
				</div>
			</div>
			<div class="flex-spacebetween" style="font-size: 11px;">
				<div style="display: flex;">
					<span style="font-weight: 700;">需在线支付</span>
				</div>

				<div onclick="hotelFacilities()" style="display: flex;">
					<div style="color: #05C484;">酒店设施</div>
					<div style="transform: rotate(-90deg);margin-left: 15px;">
						<img src="./images/arrow.png" style="width: 14px;height: 14px">
					</div>
				</div>
			</div>
			<div style="font-size: 11px;">大床1.8米</div>
			<div style="font-size: 11px;font-weight: 700;">无餐食</div>
			<div class="line"></div>
			<div style="font-size: 13px;">
				<div class="flex-spacebetween">
					<div style="display: flex;">
						<div class="form-label">入住姓名</div>
						<div class="form-content">张三</div>
					</div>
					<div class="right-font" style="">修改信息</div>
				</div>
				<div class="flex-spacebetween">
					<div style="display: flex;">
						<div class="form-label">联系方式</div>
						<div class="form-content">132****2291</div>
					</div>
				</div>
				<div class="flex-spacebetween">
					<div style="display: flex;">
						<div class="form-label">最晚到店</div>
						<div class="form-content">2024-01-08 06:00</div>
					</div>
				</div>
				<div class="flex-spacebetween">
					<div style="display: flex;">
						<div class="form-label">订单编号</div>
						<div id="orderNum" class="form-content">3074445986</div>
					</div>
					<div onclick="copyOrderNum()" class="right-font">复制</div>
				</div>

			</div>

		</div>



		<div class="page-bottom">
			<button onclick="deleteInfo()" class="bottom-button1">取消订单</button>
			<button onclick="save()" class="bottom-button2">去支付</button>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.picker.min.js"></script>
		<script src="js/jquery-3.5.1.min.js"></script>
		<script type="text/javascript">
			mui.init()

			function payInfo() {
				alert('支付房费')
			}

			function mustRead() {
				alert('必读')
			}

			function cancelRule() {
				alert('取消规则')
			}

			function payDetail() {
				alert('费用明细')
			}

			function connectHotel() {
				alert('联系酒店')
			}

			function car() {
				alert('去搭车')
			}

			function map() {
				alert('地图')
			}

			function hotelFacilities() {
				alert('酒店设施')
			}

			function copyAddress() {
				let textToCopy = $('#hotelAddress').text()
				// 创建一个隐藏的 textarea 元素
				var textarea = $('<textarea></textarea>').text(textToCopy).appendTo('body').select();
				try {
					// 尝试执行复制操作
					document.execCommand('copy');
					console.log('文本已成功复制到剪贴板！');
				} catch (err) {
					console.error('无法执行复制操作：', err);
				} finally {
					// 删除 textarea 元素
					textarea.remove();
				}
				console.log(textToCopy)
			}

			function copyOrderNum() {
				let textToCopy = $('#orderNum').text()
				// 创建一个隐藏的 textarea 元素
				var textarea = $('<textarea></textarea>').text(textToCopy).appendTo('body').select();
				try {
					// 尝试执行复制操作
					document.execCommand('copy');
					console.log('文本已成功复制到剪贴板！');
				} catch (err) {
					console.error('无法执行复制操作：', err);
				} finally {
					// 删除 textarea 元素
					textarea.remove();
				}
				console.log(textToCopy)
			}
		</script>
	</body>

</html>
